<template>
	<div class='wy-main car-info'>
		<a-form :form="form" @submit="handleSubmit" class="wy-form" >
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="驾驶员姓名">
				<a-input v-decorator="[ 'driverName ', {rules: [{ required: true, message: '请输入驾驶员姓名!' }]}]" placeholder='请输入驾驶员姓名' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="证件类型">
				<a-select  v-decorator="[ 'certificatesType', {rules: [{ required: true, message: '请选择证件类型!' }]} ]" placeholder="请选择证件类型">
					<a-select-option value="0">
						身份证
					</a-select-option>
					<a-select-option value="1">
						护照
					</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="证件号">
				<a-input v-decorator="[ 'certificatesNo ', {rules: [{ required: true, message: '证件号不能为空!' }]}]" placeholder='请输入证件号' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="手机号">
				<a-input v-decorator="[ 'mobile ', {rules: [{ required: true, message: '手机号不能为空!' },{ validator: checkMobile }]}]" placeholder='请输入手机号' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="居住地址">
				<a-input v-decorator="[ 'address ', {rules: [{ required: true, message: '居住地址不能为空!' }]}]" placeholder='请选择居住地址' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="详细地址">
				<a-input v-decorator="[ 'detailAddress', {rules: [{ required: true, message: '请选择出发地!' }]}]" placeholder='请选择详细地址' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="电子邮箱">
				<a-input v-decorator="[ 'email',{rules: [{ validator: checkMail }]}]" placeholder='请输入电子邮箱' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 8 }" label="QQ">
				<a-input v-decorator="[ 'qq']" placeholder='请输入您的QQ' />
			</a-form-item>
			<a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="驾驶员认证图片" class="upzjimg">
				<a-upload name="file" listType="picture-card"  class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Driver_Change">
					<div class="img_zz" v-if="Driver_img">
						<div class="img_zz_text" >
							<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								 驾驶员正面照 
							</div>
						</div>
						<div class="img_zz_d"></div>
					</div>
					<img  v-if="Driver_img" :src="Driver_img" alt="avatar" />
					<div class="up_img_d" v-if="!Driver_img">
						<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
						<div class="ant-upload-text" style="margin-top: 10px;">
							 驾驶员正面照 
						</div>
					</div>
				</a-upload>
				<a-upload name="file" listType="picture-card"  class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Positive_Change">
					<div class="img_zz" v-if="Positive_img">
						<div class="img_zz_text" >
							<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								 身份证<span style="color: red;">正面</span>照  
							</div>
						</div>
						<div class="img_zz_d"></div>
					</div>
					<img  v-if="Positive_img" :src="Positive_img" alt="avatar" />
					<div class="up_img_d" v-if="!Positive_img">
						<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
						<div class="ant-upload-text" style="margin-top: 10px;">
							 身份证<span style="color: red;">正面</span>照  
						</div>
					</div>
				</a-upload>
				<a-upload name="file" listType="picture-card"  class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Back_Change">
					<div class="img_zz" v-if="Back_img">
						<div class="img_zz_text" >
							<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								 身份证<span style="color: red;">背面</span>照  
							</div>
						</div>
						<div class="img_zz_d"></div>
					</div>
					<img  v-if="Back_img" :src="Back_img" alt="avatar" />
					<div class="up_img_d" v-if="!Back_img">
						<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
						<div class="ant-upload-text" style="margin-top: 10px;">
							 身份证<span style="color: red;">背面</span>照 
						</div>
					</div>
				</a-upload>
				<a-upload name="file" listType="picture-card"  class="avatar-uploader up_img" :showUploadList="false" :action="uploadUrl" :beforeUpload="beforeUpload" @change="Qualifications_Change">
					<div class="img_zz" v-if="Qualifications_img">
						<div class="img_zz_text" >
							<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
							<div class="ant-upload-text" style="margin-top: 10px;">
								 道路运输从业资格证 
							</div>
						</div>
						<div class="img_zz_d"></div>
					</div>
					<img  v-if="Qualifications_img" :src="Qualifications_img" alt="avatar" />
					<div class="up_img_d" v-if="!Qualifications_img">
						<a-icon style="font-size: 30px;" :type="loading ? 'loading' : 'plus'" />
						<div class="ant-upload-text" style="margin-top: 10px;">
							 道路运输从业资格证 
						</div>
					</div>
				</a-upload>
			</a-form-item>
			<a-row style="margin-top: 10px;">
				<a-col :span="24">
					<p style="margin: 0;">
						<a-divider style="width: 95%;margin-left: 20px;" />
					</p>
				</a-col>
			</a-row>
			<div class="ant-row ant-form-item">
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-20 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<a-checkbox v-model="agreement" >
								我已阅读并接受<a href="javascript:;">《云南国际物流云用户协议》</a><a href="javascript:;">《用户信息发布协议》</a>
							</a-checkbox>
						</span>
					</div>
				</div>
			</div>
			<div class="ant-row ant-form-item">
				<div class="ant-col-4 ant-form-item-label"></div>
				<div class="ant-col-10 ant-form-item-control-wrapper">
					<div class="ant-form-item-control">
						<span class="ant-form-item-children">
							<a-button type="primary"  :disabled = '!agreement' html-type="submit" style="width: 280px;height:50px;margin-top: -10px;">
								保存
							</a-button>
						</span>
					</div>
				</div>
			</div>
		</a-form>
	</div>
</template>
<script>
	import { mapState } from 'vuex'
	import {checkTel, checkTelNum, checkEmail} from 'utils/formValidate'
	export default {
		components: {
		},
		data() {
			return {
				agreement:false,
				
				uploadUrl: 'http://10.23.118.71:9527/api/fileupload/upload',// 图片上传地址
				Driver_img:'',// 驾驶员正面照片
				Positive_img:'',// 身份证正面照片
				Back_img:'',// 身份证背面照片
				Qualifications_img:'',// 道路运输从业资格证照片
				
				certificatesPics :'',// 道路运输从业资格证 
				certificatesPicsPath :'',// 道路运输从业资格证目录 
				driverPics :'',// 驾驶员照片
				driverPicsPath:'',// 驾驶员照片目录 
				idcardBackPics :'',// 身份证反面
				idcardBackPicsPath :'',// 身份证反面存放目录 
				idcardJustPics :'',//  身份证正面 
				idcardJustPicsPath :'',// 身份证正面存放目录
				
				loading: false,
				imageUrl: '',
				formItemLayout: {
					labelCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 4
						},
					},
					wrapperCol: {
						xs: {
							span: 24
						},
						sm: {
							span: 10
						},
					},
				},
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		created() {},
		watch: {},

		mounted: function() {

		},
		methods: {
			// 校验手机号
			checkMobile:checkTel,
			// 校验邮箱
			checkMail:checkEmail,
			// 上传驾驶员正面照片
			Driver_Change(info){
				console.log(info,9889)
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
					this.Driver_img = info.file.response.data.certifJpgFile
					this.driverPics = info.file.response.data.certificatesjpg// 驾驶员照片
					this.driverPicsPath= info.file.response.data.certificatesPath// 驾驶员照片目录 
					this.loading = false
				}
			},
			// 身份证正面照
			Positive_Change(info){
				console.log(info,9889)
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
					this.Positive_img = info.file.response.data.certifJpgFile
					this.idcardJustPics = info.file.response.data.certificatesjpg//  身份证正面 
					this.idcardJustPicsPath = info.file.response.data.certificatesPath// 身份证正面存放目录
					this.loading = false
				}
			},
			// 上传身份证背面
			Back_Change(info){
				console.log(info,9889)
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
					this.Back_img = info.file.response.data.certifJpgFile
					this.idcardBackPics = info.file.response.data.certificatesjpg// 身份证反面
					this.idcardBackPicsPath = info.file.response.data.certificatesPath// 身份证反面存放目录 
					this.loading = false
				}
			},
			// 上传运输资格证照片
			Qualifications_Change(info){
				console.log(info,9889)
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
					this.Qualifications_img = info.file.response.data.certifJpgFile
					this.certificatesPics = info.file.response.data.certificatesjpg// 道路运输从业资格证 
					this.certificatesPicsPath = info.file.response.data.certificatesPath// 道路运输从业资格证目录
					this.loading = false
				}
			},
			// 上传证件
			beforeUpload(file) {
				console.log(file.type)
				const isJPG = file.type === 'image/jpeg' || 'image/png'
				if(!isJPG) {
					this.$message.error('You can only upload JPG file!')
				}
				const isLt2M = file.size / 1024 / 1024 < 2
				if(!isLt2M) {
					this.$message.error('Image must smaller than 2MB!')
				}
				return isJPG && isLt2M
			},
			handleChange(info) {
				if(info.file.status === 'uploading') {
					this.loading = true
					return
				}
				if(info.file.status === 'done') {
					// Get this url from response in real world.
					getBase64(info.file.originFileObj, (imageUrl) => {
						this.imageUrl = imageUrl
						this.loading = false
					})
				}
			},
			// 认证提交
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						values.userId = this.user.userId
						values.certificatesPics = this.certificatesPics// 道路运输从业资格证 
						values.certificatesPicsPath = this.certificatesPicsPath// 道路运输从业资格证目录 
						values.driverPics = this.driverPics// 驾驶员照片
						values.driverPicsPath= this.driverPicsPath// 驾驶员照片目录 
						values.idcardBackPics = this.idcardBackPics// 身份证反面
						values.idcardBackPicsPath = this.idcardBackPicsPath// 身份证反面存放目录 
						values.idcardJustPics = this.idcardJustPics//  身份证正面 
						values.idcardJustPicsPath = this.idcardJustPicsPath// 身份证正面存放目录
						console.log('Received values of form: ', values);
						this.$post('info/infoDriver', values,true).then((r) => {
							console.log(r,8989)
							if(r.status == 200){
								this.$notification.success({
								  message: r.data.message,
								});
							}
							this.loading = false;
						}).catch((e) => {
							console.log(e)
							this.loading = false;
						})
					}
				});
			},
			callback(key) {
				console.log(key)
			}
		},
		computed: {
			...mapState({
				multipage: state => state.setting.multipage,
				user: state => state.account.user,
			}),
		},
	}
</script>

<style lang="less" scoped>
	.car-info {
		.upzjimg{
			.up_img{
				float: left;
				position: relative;
				img{
					width: 200px;
					height: 200px;
				}
				.up_img_d{
					width: 200px;
					height: 200px;
					padding-top: 55px; 
				}
				.img_zz{
					width: 200px;
					height: 200px; 
					position: absolute; 
					color: #fff;
					border: 1px solid;
					.img_zz_text{
						width: 100%;
						text-align: center;
						position: absolute;
						z-index: 10;
						padding-top: 55px; 
					}
					.img_zz_d{
						position: absolute;
						width: 200px ;
						height:200px;
						background: #000;
						opacity:0.6;
					}
				}
			}
		}
	}
</style>